<template>
  <div class="home-container bs">
    <el-row :gutter="40">
      <el-col :span="6">
        <!-- <schedule></schedule> -->
        <comment-left @getIndex="getIndex"></comment-left>
      </el-col>
      <el-col :span="16">
        <!-- <home-list></home-list> -->
        <chatBox
          class="bg-cf"
          v-if="store.state.user.clientInfo.avatar"
        ></chatBox>

        <comment-right
          :currentTab="currentIndex"
          v-if="
            [1, 2, 3].includes(currentIndex) &&
            !store.state.user.clientInfo.avatar
          "
        ></comment-right>
      </el-col>
    </el-row>
  </div>
</template>

<script lang="ts">
import { ref } from 'vue'
import { useStore } from 'vuex'
import CommentLeft from './cpns/comment-left.vue'
import CommentRight from './cpns/comment-right.vue'
import chatBox from '@/components/chatBox'
export default {
  name: 'message',
  components: {
    CommentLeft,
    CommentRight,
    chatBox
  },
  setup() {
    const store = useStore()
    let currentIndex = ref(0)
    const count = ref(0)
    const load = () => {
      count.value += 2
    }
    const getIndex = (index: number) => {
      currentIndex.value = index
      if (index !== 0) {
        store.commit('user/setClientInfo', {})
      }
    }
    return {
      count,
      currentIndex,
      store,
      load,
      getIndex
    }
  }
}
</script>
<style lang="less" scoped>
.home-container {
  background-color: #f7f9fe;
  padding: 60px 80px 58px;
  height: 100vh;
}
.infinite-list {
  height: 300px;
  padding: 0;
  margin: 0;
  list-style: none;

  .infinite-list-item {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    background: var(--el-color-primary-light-9);
    margin: 10px;
    color: var(--el-color-primary);
    & + .list-item {
      margin-top: 10px;
    }
  }
}
</style>
